<template>
    <div class="login">
        <div class="login-con">
            <div class="dev-width">
                <img class="login-img" src="~/assets/images/suo.png" />
                <div class="login-box">
                    <div class="login-title">用户登录</div>
                    <Form ref="userinfo" class="login-form" :model="userinfo" :rules="ruleValidate">
                        <FormItem prop="userName" class="login-input">
                            <i class="iconfont icon-ren111"></i>
                            <Input v-model.trim="userinfo.userName" placeholder="请输入手机号"></Input>
                        </FormItem>
                        <FormItem prop="password" class="login-input">
                            <i class="iconfont icon-mima"></i>
                            <Input v-model.trim="userinfo.password" type="password" placeholder="请输入密码" @keyup.enter.native="login"></Input>
                        </FormItem>
                        <Button class="login-btn" @click="login">登 录</Button>
                    </Form>
                    <div class="other-link">
                        <nuxt-link :to="{path:'register'}">用户注册</nuxt-link>
                        <nuxt-link :to="{path:'forgetpwd'}">忘记密码？</nuxt-link>
                    </div>
                </div>
            </div>
        </div>
        <div class="record footdeep">
            <div class="dev-width ">
                <p class="w184">
                    <a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" target="苏ICP备16066286号">苏ICP备16066286号</a>
                </p>
                <p class="w430">
                    信息产业部备案系统网址
                    <a href="http://www.jstec.com.cn/">www.jstec.com.cn</a>
                </p>
                <p class="w396">
                    Copyright ©2017江苏省技术产权交易市场有限公司
                </p>
            </div>
        </div>

        <Modal class="confirm-dialog" v-model="realNameVisible" width="360" @on-cancel="cancel">
            <p slot="header" style="color:#f60;text-align:center">
            </p>
            <div style="text-align:center">
                <p> 抱歉，您没有实名认证!</p>
                <a :href="businessBrowserUrl+'/realname'" class="h_l">立即实名认证</a>
            </div>
            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>
<script>
import { phone, password } from '~/constant/validform'
import config from "~/config"
import { mapState } from 'vuex'

export default {
    layout: 'onlyHeader',
    head() {
        return {
            title: '首页'
        }
    },
    data() {
        return {
            realNameVisible: false,
            businessBrowserUrl: config.businessBrowserUrl,
            userinfo: {
                userName: '',
                password: '',
            },
            ruleValidate: {
                userName: phone(),
                password: password()
            }
        }
    },
    computed: {
        ...mapState(['user', 'identities']),
    },
    methods: {
        cancel() {
            this.$router.push("/");
        },
        login(name) {
            this.$refs.userinfo.validate((valid) => {
                if (valid) {
                    this.$store.dispatch('LoginIn', this.userinfo).then(() => {
                        if (typeof (this.$route.query.callback) != 'undefined') {
                            this.$router.go(-1);
                        } else
                            this.$router.push("/")
                    }).catch(err => {
                        if (err.code == 500) {
                            this.$Message.error('登录失败,请稍后重试')
                        }
                        if (err.code == 403) {
                            window.location.href = '/'
                        }
                        else {
                            this.$Message.error(err.message)
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="less">
.login {
  .login-con {
    background-image: linear-gradient(0deg, #549de2 0%, #4285f4 100%);
    width: 100%;
    height: 600px;
    .dev-width {
      overflow: visible;
    }
  }
  .login-img {
    display: block;
    margin-left: -120px;
  }
  .login-box {
    background: #ffffff;
    box-shadow: 0 4px 16px -1px rgba(31, 63, 116, 0.28);
    width: 350px;
    position: absolute;
    right: 20px;
    top: 100px;
    padding: 0 0 40px;
    .login-title {
      font-size: 18px;
      color: #333;
      margin: 40px 20px;
    }
    .login-btn {
      width: 100%;
      padding: 0;
      background: #4285f4;
      color: #fff;
      border: 0;
      font-size: 14px;
      line-height: 40px;
      margin: 20px 0 20px;
      cursor: pointer;
      text-align: center;
    }
    .other-link {
      text-align: right;
      a {
        font-size: 14px;
        color: #4285f4;
        margin-right: 20px;
      }
    }
  }
  .login-form {
    margin: 0 20px;
    .login-input {
      background: #ffffff;
      border: 1px solid #d4dcea;
      width: 308px;
      height: 38px;
      margin: 0 0 20px;
      i {
        font-size: 20px;
        margin: 5px 10px 0;
        color: #333;
        float: left;
        vertical-align: sub;
      }
      .ivu-input-wrapper {
        width: 86.5%;
        input {
          border: 0;
          padding: 0;
          float: left;
        }
      }
    }
  }
  .footdeep {
    background: white;
    width: 100%;
    position: fixed;
    bottom: 0;
    p {
      font-size: 12px;
      color: #666;
      opacity: 0.45;
      line-height: 44px;
      margin-right: 62px;
      float: left;
      a {
        color: #666;
      }
    }
  }
}
</style>
